<template>
 <div class="content">
	<div class="big_box">
		<div class="left_box">
			<div class="left_box_top">
				<div class="left_box_top_left">
					<div class="left_box_top_left_portrait">
						<img src="@/assets/image/head/logo.png" alt="">
					</div>
					<div class="left_box_top_left_info">
						<div>小雨</div>
						<div>2级</div>
					</div>
					<div class="left_box_top_left_score">
						<div>90</div>
						<div>综合评分</div>
					</div>
				</div>
				<div class="left_box_top_right">
					<div class="left_box_top_right_tit">能力值</div>
					<div class="left_box_top_right_content" id="leidabox">
						
					</div>
				</div>
			</div>
			<div  class="left_box_bottom">
				<div class="big_box_left">
					<div class="left_top">
						<div class="left_top_tit">
							<div>小雨，您好！</div>
							<div>本月测评重点统计</div>
						</div>
						<div class="bing_tit">
							<div class="bing_tit_item" v-for="(v,n) in 5">
								<div class="bing_item_yuan"></div>
								<div class="bing_item_tit" :class="{'bing_item_tit_special':v==1}">阅读广度</div>
								<img class="bing_item_up" src="@/assets/image/home/up.png" alt="">
							</div>
						</div>
						<div class="left_top_charts" id="bing"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="right_box">
			<div class="right_box_tit">测试历史数据</div>
			<div class="right_box_label_box">
				<div class="right_box_label_box_left">
					<div>
						<div class="right_box_label_box_left_item"
						 :class="{right_box_label_box_left_item_special:v%2==0}"
						 v-for="v in 20" >词语逻辑</div>
					</div>
				</div>
				<div class="right_box_label_box_right">
					<div></div>
					<div></div>
					<div></div>
				</div>
			</div>
			<div class="right_box_info">
				<div v-for="v in 2">
					<div class="right_box_info_item_top">
						<div>词语逻辑</div>
						<div>
							<div>
								<span v-if="!value1">请选择</span>
								<span v-if="value1">{{getTime(value1)}}</span>
								<div class="date_pick">
									<el-date-picker
										 ref="picker"
										 v-model="value1"
										 type="date"
										 placeholder="选择日期">
									   </el-date-picker>
								</div>
							</div>
							<img src="../../assets/image/collection/down.png" alt="">
						</div>
					</div>
					<div class="right_box_info_item_bottom">
						<div v-for="v in 3">
							<img src="../../assets/image/me/item1.png" alt="">
							<div>本月测评<span>20</span>道</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right_box_zhexian">
				<div>历史数据</div>
				<div id="zhexian"></div>
			</div>
		</div>
	</div>
 </div>
</template>

<script>

import axios from "axios"
import qs from 'qs'

export default {
  name: 'floor',
   data() {
 	return {
	value1:''
 	}
 },
		mounted(){
		console.log(1)
		this.initializeLeida()
		this.initializeBing()
		this.initializeZhexian()
		},
		beforeDestroy() {


		},
		 methods:{
			 getTime(str){
			 	var month=str.getMonth()+1
			 	var year=str.getFullYear()
			 	var date=str.getDate()
			 	return year+"."+month
			 },
			 initializeZhexian(){
				 var echarts = require('echarts');
				 // 基于准备好的dom，初始化echarts实例
				 var myChart3 = echarts.init(document.getElementById('zhexian'));
				 myChart3.setOption({
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
})
			 },
			initializeLeida(){
				var echarts = require('echarts');
				// 基于准备好的dom，初始化echarts实例
				var myChart2 = echarts.init(document.getElementById('leidabox'));
				myChart2.setOption({
					
					tooltip: {},
					legend: {
						// data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
						data: []
					},
					radar: {
						// shape: 'circle',
						name: {
							textStyle: {
								color: '#fff',
								backgroundColor: '#999',
								borderRadius: 3,
								padding: [3, 5]
							}
						},
						indicator: [
							{ name: '销售', max: 6500},
							{ name: '管理', max: 16000},
							{ name: '信息技术', max: 30000},
							{ name: '客服', max: 38000},
							{ name: '研发', max: 52000},
							{ name: '市场', max: 25000}
						]
					},
					series: [{
						name: '预算 vs 开销（Budget vs spending）',
						type: 'radar',
						// areaStyle: {normal: {}},
						data: [
							{
								value: [4300, 10000, 28000, 35000, 50000, 19000],
								name: '预算分配（Allocated Budget）'
							}
						]
					}]
				})
			},
			initializeBing(){
				var echarts = require('echarts');
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('bing'));
					myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)'
					},
					legend: {
						orient: 'vertical',
						left: 10,
						data: []
					},
					series: [
						{
							name: '访问来源',
							type: 'pie',
							radius: ['50%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '15',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: [
								{value: 335, name: '直接访问'},
								{value: 310, name: '邮件营销'},
								{value: 234, name: '联盟广告'},
								{value: 135, name: '视频广告'},
								{value: 1548, name: '搜索引擎'}
							]
						}
					]
				});
			}
		 },


		 watch: {

		 }
	}
</script>
<style lang="less" scoped>
.big_box{
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	.left_box{
		width: 5.68rem;
		
		.left_box_top{
			background: white;
			height: 3.81rem;
			border-radius: 10px;
			margin-bottom: 0.29rem;
			box-sizing: border-box;
			padding: 0.34rem 0.36rem 0.37rem 0.3rem;
			display: flex;
			justify-content: space-between;
			margin-bottom: 0.29rem;
			.left_box_top_left{
				.left_box_top_left_portrait{
					width: 0.68rem;
					height: 0.68rem;
					border-radius: 50%;
					overflow: hidden;
					&>img{
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				.left_box_top_left_info{
					display: flex;
					height: 0.26rem;
					align-items: center;
					justify-content: flex-start;
					margin: 0.26rem 0 0.85rem;
					&>div:nth-child(1){
						font-size: 0.18rem;
						color: #353535;
						margin-right: 0.05rem;
					}
					&>div:nth-child(2){
						padding-right: 0.07rem;
						box-sizing: border-box;
						width: 0.51rem;
						height: 0.26rem;
						background-size: 100%;
						background-repeat: no-repeat;
						background-image: url(../../assets/image/me/V.png);
						font-size: 0.13rem;
						color: white;
						line-height: 0.26rem;
						text-align: right;
					}
				}
				.left_box_top_left_score{
					&>div:nth-child(1){
						padding-left: 0.1rem;
						font-weight: bold;
						color: #4852C2;
						font-size: 0.54rem;
						background: linear-gradient(0deg, #6057B6 0%, #7783F2 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						margin-bottom: 0.22rem;
					}
					&>div:nth-child(2){
						padding-left: 0.08rem;
						font-size: 0.18rem;
						font-weight: 400;
						color: #4852C2;
					}
				}
			}
			.left_box_top_right{
				width: 3.39rem;
				.left_box_top_right_tit{
					font-size: 0.21rem;
					color: #353535;
					text-align: right;
					margin-bottom: 0.04rem;
				}
				.left_box_top_right_content{
					// width: 70%;
					// height: 2rem;
					width: 100%;
					height: 2.82rem;
				}
			}
		}
		.left_box_bottom{
			background: white;
			.big_box_left{
				width: 5.68rem;
				.left_top{
					position: relative;
					width: 100%;
					min-height: 3.01rem;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 0.1rem;
					background-position: right;
					background-size: 2.3rem 3.01rem;
					background-repeat: no-repeat;
					padding: 0.33rem 0  0.26rem 0.38rem;
					margin-bottom: 0.39rem;
					.left_top_tit{
						font-size: 0.21rem;
						font-weight: 400;
						color: #353535;
					}
					.bing_tit{
						margin-top: 0.59rem;
						.bing_tit_item{
							margin-bottom: 0.15rem;
							display: flex;
							align-items: center;
							.bing_item_yuan{
								width: 0.13rem;
								height: 0.13rem;
								border: 0.04rem solid #F89383;
								border-radius: 50%;
								margin-right: 0.15rem;
								box-sizing: border-box;
							}
							.bing_item_tit{
								color: #767681;
								font-size: 0.13rem;
							}
							.bing_item_tit_special{
								color: #3A3A3A;
							}
							.bing_item_up{
								margin-left: 0.15rem;
								width: 0.14rem;
								height: 0.16rem;
							}
						}
					}
					.left_top_charts{
						width: 1.86rem;
						height: 1.86rem;
						position: absolute!important;
						right: 0.84rem;
						bottom: 0.31rem;
					}
				}
				.left_bottom{
					width: 100%;
					display: flex;
					justify-content: space-between;
					.bottom_left{
						width: 3.4rem;
						background: #FFFFFF;
						border-radius: 0.1rem;
						min-height: 2.29rem;
						background-position: left bottom;
						background-size: 2.12rem 2.29rem;
						background-repeat: no-repeat;
						box-sizing: border-box;
						padding-right: 0.33rem;
						padding-top: 0.41rem;
						&>div{
							text-align: right;
							font-size: 0.16rem;
							color: #393939;
							&>span{
								color: #FF9C31;
							}
						}
					}
					.bottom_right{
						width: 1.96rem;
						background: #5E76DF;
						border-radius: 0.1rem;
						min-height: 2.29rem;
						display: flex;
						flex-direction: column;
						align-items: center;
						box-sizing: border-box;
						justify-content: space-between;
						padding:0.41rem 0 0.26rem;
						.bottom_right_head{
							width: 0.502rem;
							height: 0.502rem;
							border-radius: 50%;
							background: white;
							text-align: center;
							box-sizing: border-box;
							padding-top: 0.11rem;
							&>img{
								width: 0.36rem;
								height: 0.36rem;
								display: block;
								margin: 0 auto;
							}
						}
						.bottom_right_tit{
							margin: 0.23rem 0 0.36rem;
							font-size: 0.21rem;
							color: white;
							text-align: center;
							font-weight: 400;
						}
						.bottom_right_button{
							width: 0.89rem;
							height: 0.31rem;
							box-sizing: border-box;
							border: 0.02rem solid #ACBBFF;
							border-radius: 0.16rem;
							line-height: 0.31rem;
							text-align: center;
							color: #CDD6FF;
							font-size: 0.14rem;
							cursor: pointer;
						}
						.bottom_right_button:hover{
							background-color: white;
							color: #5E76DF;
						}
					}
				}
			}
		}
	}
	.right_box{
		background: white;
		width: 12.01rem;
		height: 7.61rem;
		background: white;
		padding: 0.35rem 0.33rem 0.4rem 0.38rem;
		box-sizing: border-box;
		.right_box_tit{
			font-size: 0.21rem;
			color: #353535;
			margin-bottom: 0.35rem;
		}
		.right_box_label_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 0.48rem;
			width: 100%;
			
			.right_box_label_box_left{
				width: 10.94rem;
				height: 0.48rem;
				overflow-x: scroll;
				&>div{
					width: 400%;
					height: 100%;
				}
				.right_box_label_box_left_item{
					height: 100%;
					padding: 0 0.22rem;
					line-height: 0.48rem;
					color: #A2A2B4;
					font-size: 0.16rem;
					background: #F1F1F4;
					float: left;
					border-radius: 0.05rem;
					margin-right: 0.14rem;
				}
				.right_box_label_box_left_item_special{
					color: white;
					background: #647BDF;
				}
			}
			.right_box_label_box_right{
				width: 0.22rem;
				height: 0.48rem;
				box-sizing: border-box;
				padding: 0.13rem 0;
				background: #F1F1F4;
				border-radius: 0.05rem;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				&>div{
					height: 0.04rem;
					width: 0.04rem;
					background-color: #A9A9A9;
					border-radius: 50%;
				}
			}
		}
		.right_box_info{
			height: 1.66rem;
			display: flex;
			align-items: center;
			margin: 0.38rem 0 0.57rem;
			&>div{
				margin-right: 0.3rem;
				padding: 0.26rem 0.14rem 0 0.49rem;
				box-sizing: border-box;
				width: 4.12rem;
				.right_box_info_item_top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 0.2rem;
					&>div:nth-child(1){
						color: #606C93;
						font-size: 0.18rem;
					}
					&>div:nth-child(2){
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 0.88rem;
						height: 0.25rem;
						box-sizing: border-box;
						padding: 0 0.11rem 0 0.14rem;
						background: #FBFBFF;
						border-radius: 0.13rem;
						&>div{
							font-size: 0.12rem;
							color: #A9ACC3;
							position: relative;
							.date_pick{
								opacity: 0;
								width: 100%;
								height: 100%;
								position: absolute;
								left: 0;
								bottom: 0;
								&>.el-date-editor--date{
									width: 100%;
									height: 100%;
									position: absolute;
									top: 0;
									left: 0;
								}
							}
						}
						&>img{
							width: 0.11rem;
							height: 0.07rem;
						}
					}
				}
				.right_box_info_item_bottom{
					padding-left: 1.38rem;
					&>div{
						display: flex;
						align-items: center;
						margin-bottom: 0.11rem;
						&>img{
							width: 0.18rem;
							height: 0.18rem;
							margin-right: 0.12rem;
						}
						&>div{
							color: #5F6B94;
							font-size: 0.14rem;
							&>span{
								color: #0948FF;
							}
						}
					}
				}
			}
			&>div:nth-child(1){
				background-image: url(../../assets/image/me/bg1.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
			&>div:nth-child(2){
				background-image: url(../../assets/image/me/bg2.png);
				background-size: 100%;
				background-repeat: no-repeat;
			}
		}
		.right_box_zhexian{
			&>div:nth-child(1){
				color: #353535;
				font-size: 0.18rem;
			}
			&>div:nth-child(2){
				width: 100%;
				height:3.02rem ;
			}
		}
	}
}
</style>